
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        html{
            height:100%;

        }
        body{
            display: flex;
            justify-content:center;
            align-items:center;
            height:100%;
            background-color: #330033;
        }
        div{
            /*border:1px solid red;*/
            width:30%;
        }
        form{
            display:flex;
            flex-direction:column;

        }

        h1{
            text-align:center;
            letter-spacing:10px;
            text-shadow: 0 0 10px;
            color: white;
        }
        input{
            height: 30px;
            margin-bottom:5px;
            border-radius:5px;
        }

        input[type=submit]{
            background-color: orange;
            letter-spacing:5px;
            box-sizing:content-box;
        }
        .sex{
            color: #dddddd;
        }
        #radio{
            margin: 0 auto;
        }
        .status{
            color: #FF0000;
        }

    </style>
</head>
<body>
<div>
    <h1>注册</h1>
    <form action="${pageContext.request.contextPath}/enroll" id="form">
        <input type="text" placeholder="请输入您的用户名" name="username" id="username">
        <label class="status">${enroll_status}</label>
        <input type="text" placeholder="请输入您的邮箱" id="email" name="email">
        <input type="text" placeholder="请输入您的电话" id="tel" name="tel">
        <input type="password" placeholder="请输入您的密码" name="password" id="password">
        <div id="radio">
            <input type="radio" name="gender" value="m"><label class="sex">男</label>
            <input type="radio" name="gender" value="f"><label class="sex">女</label><br>
            <label class="sex">${radio}</label>
        </div>

        <input type="submit" value="注册" onclick="return EnrollIsEmpty()">
    </form>
</div>
<script>
    function EnrollIsEmpty() {
        var username = document.getElementById("username");
        var email=document.getElementById("email");
        var password=document.getElementById("password");
        var tel=document.getElementById("tel");
        if (username.value.length === 0 || email.value.length ===0  ||
            password.value.length === 0 || tel.value.length === 0){
            window.alert("不能为空");
            return false;
        }
        return true;
    }
</script>
</body>
</html>

